<?php

$workers = array('sbeex', 'senft', 'romerom');

?>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Planning tool (by sbeex)</title>
        <link type="text/css" href="css/cupertino/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
        <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script>
        <link rel="stylesheet" href="style.css" />
		<script type="text/javascript">
			$(function(){
				
				// Progressbar
				/*
				$(".progressbar").progressbar({
					value: 100
				});
				*/
				
				//alert($(".progressbar").children(".label").html());
				//$( ".progressbar" ).progressbar("option", "value", $this.children(".value").html());
				/*
				var counter = parseFloat($(".progressbar span.value").text());
				$(".progressbar").progressbar({ value: counter });
				$(".progressbar span.value").remove();
				*/
				
		

				$('.progressbar').children().hide();	
				$('.progressbar').each(function() {
   				//	$(this).children('span').hide();
   			
   					 
   					//$(this).children('.label').css(display, none);					
   					// alert(index + ': ' + $(this).text());
   					var val = parseFloat($(this).children('.value').text());
   				//	alert($(this).children('.duration').text());
   					var label = $(this).children('.label').text();
   					var duration = parseFloat($(this).children('.duration').text());
   					$(this).progressbar({ value: val});
   					$(this).width(duration*10);
   					
   					// Popup d'informations
   					$(this).hover(function() {
   						
   					});
   					
   					
   		
				});
  
				
			});
		</script>        
    </head>
    <body>
    	<h1>Gestion du planing</h1>
    	
    	<div id="contener">
    		<ul class="worker">
    		<?php
    			foreach($workers as $worker) {
    			?>
    			<li>
    				<table style="width:100%;">
    					<tr>
    						<td class="label">	
    							<p class="center"><img src="res/user.png" alt="Participant" title=""/></p>
    							<p class="center"><?php echo $worker; ?></p>
    						</td>
    						<td>
    							<table class="tasksBar">
    								<tr style="background-color:#F2FAFF;">
    									<td>
    											<div style="margin-top:12px; float:left; width:60px; overflow:hidden; font-size:8pt; color:grey;">Réel</div> 
			    								<div class="progressbar">
			    									<span class="value">100</span>
			    									<span class="duration">5</span>
			    									<span class="label">Cahier des charges</span>
			    									<span class="describe">Etablir un cahier des charges complet qui décrit les différentes.</span> 
			    								</div>
			    								

			    								<div class="progressbar">
			    									<span class="value">0</span>
			    									<span class="duration">12</span>
			    									<span class="label">Gestion des tâches</span>
			    								</div>
			    											    								
			    								<div class="progressbar">
			    									<span class="value">0</span>
			    									<span class="duration">8</span>
			    									<span class="label">Gestion des tâches</span>
			    								</div>			    									
									
    									</td>
    								</tr>
    								<tr style="background-color:#F2FAFF;">

    									<td>	   
    										<div style="margin-top:12px; float:left; width:60px; overflow:hidden; font-size:8pt; color:grey;">Planifié</div> 								
		    								<div class="progressbar">
		    									<span class="value">100</span>
		    									<span class="duration">2</span>
		    									<span class="label">Gestion des tâches réel</span>
		    								</div>	
		    								<div class="progressbar">
		    									<span class="value">100</span>
		    									<span class="duration">12</span>
		    									<span class="label">Gestion des tâches réel</span>
	    									</div>			    													    							<div class="progressbar">
		    									<span class="value">100</span>
		    									<span class="duration">8</span>
		    									<span class="label">Gestion des tâches</span>
		    								</div>					
    									</td>
    								</tr>
    							</table>

    						</td>
    					</tr>
    				</table>
    			</li>
    			</li>
    			<?php
    			}
    			?>
    			<li>
    				<table>
    					<tr>
    						<td class="label">	
    							<p class="center"><img src="res/community.png" alt="Tous les participants" title=""/></p>
    							<p class="center">Tous</p>
    						</td>
    						<td>
    							<table class="tasksBar">
    								<tr style="background-color:#F2FAFF;">		
    									<td>	    								
		    								<div class="progressbar">
		    									<span class="value">0</span>
		    									<span class="duration">2</span>
		    									<span class="label">Réunion</span>
		    								</div>								
    									</td>
    								</tr>
    								<tr style="background-color:#F2FAFF;">

    									<td>	    								
		    								<div class="progressbar">
		    									<span class="value">0</span>
		    									<span class="duration">2</span>
		    									<span class="label">Réunion</span>
		    								</div>								
    									</td>
    								</tr>
    							</table>    						
    						</td>
    					</tr>
    				</table>
    			</li>    			
    		</ul>
    	
    	</div>
    </body>
</html>